<template>
  <div class="finance-card" :class="color">
    <div class="card-icon">
      <i :class="['fas', `fa-${icon}`]"></i>
    </div>
    <div class="card-content">
      <div class="card-title">{{ title }}</div>
      <div class="card-value">{{ value }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  title: {
    type: String,
    required: true
  },
  value: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: 'primary'
  }
});
</script>

<style scoped lang="scss">
.finance-card {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  }

  .card-icon {
    font-size: 30px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    margin-right: 16px;
  }

  .card-content {
    flex: 1;
    
    .card-title {
      font-size: 14px;
      color: #606266;
      margin-bottom: 8px;
    }
    
    .card-value {
      font-size: 24px;
      font-weight: 600;
      color: #303133;
    }
  }
  
  // 颜色变体
  &.primary {
    .card-icon {
      background-color: #ecf5ff;
      color: #409eff;
    }
  }
  
  &.success {
    .card-icon {
      background-color: #f0f9eb;
      color: #67c23a;
    }
  }
  
  &.warning {
    .card-icon {
      background-color: #fdf6ec;
      color: #e6a23c;
    }
  }
  
  &.danger {
    .card-icon {
      background-color: #fef0f0;
      color: #f56c6c;
    }
  }
  
  &.info {
    .card-icon {
      background-color: #f4f4f5;
      color: #909399;
    }
  }
}

@media (max-width: 768px) {
  .finance-card {
    padding: 15px;
    
    .card-icon {
      font-size: 24px;
      width: 50px;
      height: 50px;
    }
    
    .card-content {
      .card-value {
        font-size: 20px;
      }
    }
  }
}
</style> 